<template>
    <div class="picking zy-content">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
<!--          <Col span="4">-->
<!--            <div>-->
<!--              <p class="label">{{ $t('所属公司') }}</p>-->
<!--              <div class="ipt">-->
<!--                <Select-->
<!--                    v-model="searchParams.belongCompany"-->
<!--                    filterable-->
<!--                    clearable-->
<!--                    :placeholder="`${$t('common.selectInfo')}`"-->
<!--                >-->
<!--                  <Option-->
<!--                      v-for="(item) of companyList"-->
<!--                      :value="item.id"-->
<!--                      :key="item.id"-->
<!--                  >{{ item.name }}-->
<!--                  </Option-->
<!--                  >-->
<!--                </Select>-->
<!--              </div>-->
<!--            </div>-->
<!--          </Col>-->
          <Col span="6">
            <div>
              <p class="label">{{ $t('equipmentscrapped.Location') }}</p>
              <div class="ipt">
                <Cascader :value.sync="searchParams.orgCodes"/>
<!--                <Cascader clearable :data="orgList" v-model="searchParams.orgCode"-->
<!--                          :placeholder="$t('common.PleaseSelect')"-->
<!--                          change-on-select></Cascader>-->
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('保养方式') }}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.maintainType"
                    filterable
                    clearable
                    :placeholder="`${$t('common.inputInfo')}`"
                >
                  <Option
                      v-for="(item, index) of maintainType"
                      :value="item.key"
                      :label="item.name"
                      :key="index"
                  >
                  </Option
                  >
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('保养计划') }}</p>
              <div class="ipt">
                <Select
                    v-model="searchParams.planId"
                    filterable
                    clearable
                    :placeholder="`${$t('common.inputInfo')}`"
                    :remote-method="getCenterList"
                    :loading="loading"
                >
                  <Option v-for="(item,index) of planList" :value="item.value" :label="item.label" :key="index">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t('任务开始时间') }}</p>
              <div class="ipt">
                <DatePicker
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    :value="dateRange"
                    placement="bottom-end"
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="handleRangeChange"
                />
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum" v-if="checkBtnPermission.dcmMaintainDetailList">
                  {{ $t('common.Query') }}
                </Button>
                <Button
                    class="reset-btn"
                    @click="reset()"
                    v-has="'dcmMaintainDetailList'"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t('common.listInformation') }}</span>
          <Button  @click="importTask"
                   v-if="checkBtnPermission.dcmMaintainDetailExport">{{ $t('maintenance.Export') }}</Button>
<!--            <Button @click="getTableColumns(columns)">-->
<!--                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}-->
<!--            </Button>-->
        </div>
        <div class="tableContent">
          <Table
              ellipsis
              class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
              ref="selection"
              :columns="columns"
              :data="data"
              @on-selection-change="onSelectChange"
          >
          </Table>

        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="delIds.length" />
          <Page
              :total="total"
              :page-size="pageSize"
              :page-size-opts="$variable.pageSizes"
              :current="pageNum"
              @on-change="changePageNum"
              @on-page-size-change="changePageSize"
              show-sizer
              show-total

          />
        </div>
      </div>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
import recursion from "@/util/recursion";
import Cascader from '@/components/Cascader'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: 'maintainRate',
    mixins:[toggleTableOperation],
  components: {
    Cascader
  },
    data() {
        return {
            loading: false,
            searchParams: {},
            checkBtnPermission: {},
            total: 0,
            pageSize: 10,
            pageNum: 1,
            pageSizeOption: [10, 20, 30, 40],
            dateRange: [],
            maintainType: [
                {name: "全部", key: ""},
                {name: "定期保养", key: "1"},
                // { name: "计数", key: "2" },
                {name: "计时", key: "3"},
            ],
            plan: [
                {name: "全部", key: ""},
                {name: "设备保养计划1", key: "checkPlan1"},
                {name: "设备保养计划2", key: "checkPlan2"},
                {name: "设备保养计划3", key: "checkPlan3"},
            ],
            columns: [
                {type: 'selection', align: 'center', width: 60},
                {
                    title: `${this.$t('所属公司')}`,
                    key: "belongCompanyName",
                    align: 'center',
                    minWidth: 160,
                    tooltip: true,
                    resizable: true
                },
                // { title: `${ this.$t('common.ProductionDescription') }`, key: "productionLine", minWidth: 200 },
                {
                    title: `${this.$t('安装位置')}`,
                    key: "orgName",
                    align: 'center',
                    minWidth: 160,
                    tooltip: true,
                },
                {
                    title: `${this.$t('保养计划')}`,
                    key: "planName",
                    minWidth: 200,
                    align: 'left',
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('设备等级')}`,
                    key: "categoryName",
                    align: 'center',
                    minWidth: 160,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('保养级别')}`,
                    key: "itemLevel",
                    align: 'center',
                    width: 160,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('保养方式')}`,
                    key: "maintainType",
                    align: 'center',
                    minWidth: 170,
                    tooltip: true,
                    resizable: true
                },
                // { title: "保养周期", key: "checkCycle", width: 100 },
                {
                    title: `${this.$t('触发间隔')}`,
                    key: "intervalRate",
                    align: 'center',
                    minWidth: 140,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('首次生成时间')}`,
                    key: "firstTime",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('任务开始时间')}`,
                    key: "taskStartTime",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('任务截止时间')}`,
                    key: "taskEndTime",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('保养总数')}`,
                    key: "maintainNum",
                    align: 'center',
                    minWidth: 120,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: `${this.$t('已保养数量')}`,
                    key: "finishNum",
                    align: 'center',
                    minWidth: 140,
                    tooltip: true,
                    resizable: true
                },
                {
                    title: this.$t('按时保养数'),
                    key: "onTimeFinishNum",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                },
                {
                    title: this.$t('未保养数'),
                    key: "unfinishNum",
                    align: 'center',
                    minWidth: 230,
                    tooltip: true,
                },
                {
                    title: this.$t('维保达成率'),
                    key: "maintenanceFinishRate",
                    align: 'center',
                    minWidth: 200,
                    tooltip: true,
                },
                {
                    title: `${this.$t('COT')}`,
                    key: "finishRate",
                    align: 'center',
                    minWidth: 170,
                    tooltip: true,
                    resizable: true
                },
            ],
            data: [],
            companyList: [],
            delIds: [],
            planList: [],
            orgList:[]
        }
    },
    created() {
        this.getColumnWidth(this.columns)
        this.getCompanyList()
        this.searchList()
        this.getOrgList()
    },
    mounted() {
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "dcmMaintainDetailList") {
                this.checkBtnPermission.dcmMaintainDetailList = true
            }
            if (item.code == "dcmMaintainDetailExport") {
                this.checkBtnPermission.dcmMaintainDetailExport = true
            }

        }
    },
    methods: {
      getOrgList() {
        this.axios({
          method: 'get',
          url: '/basic/organization/findListByToken',
          params: {level:1}
        }).then(res => {
          if (res.code === 200) {
            const obj = {
              label: 'name',
              value: 'code',
              children: 'children'
            }
            this.orgList = recursion.convertTree(res.data, obj)
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      },
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                if (res.code === 200) {
                    this.companyList = res.data
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        getCenterList(query) {
            if (query !== '') {
                this.loading = true
                this.axios({
                    method: 'get',
                    url: '/dms/dcmMaintainDetail/queryPlans',
                    params: {
                        planName: query
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.planList = res.data
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                }).finally(() => {
                    this.loading = false
                })
            } else {
                this.planList = []
            }

        },
        handleRangeChange(val) {
            this.searchParams.taskBeginTimeStart = val[0]
            this.searchParams.taskBeginTimeEnd = val[1]
        },
      reset(){
        this.searchParams = {};
        this.dateRange = [];
        this.changeNum();
      },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let data = {
                pageNo: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams,
               orgCodes:this.searchParams.orgCodes
            };
            // for (let key in this.searchParams) {
            //     if (key === 'orgId' && this.searchParams['orgId']) {
            //         const arr = this.searchParams[key]
            //         const {length, last = length - 1} = arr
            //         this.$set(data, key, arr[last])
            //     } else {
            //         if (this.searchParams[key]) {
            //             this.$set(data, key, this.searchParams[key])
            //         }
            //     }
            //
            // }

            data.orgCode = (Array.isArray(this.searchParams.orgCode) && this.searchParams.orgCode.length > 0) ? this.searchParams.orgCode.at(-1) :"",
            this.axios({
                method: 'post',
                url: '/dms/dcmMaintainDetail/list',
                data
            }).then(res => {
                
                if (res.code === 200) {
                    this.data = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        importTask() {
            let data = {
                ids: []
            }
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(data, key, this.searchParams[key])
                }
            }
            if (this.delIds && this.delIds.length) {
                data.ids = this.delIds
            }
          data.orgCode = (Array.isArray(this.searchParams.orgCode) && this.searchParams.orgCode.length > 0) ? this.searchParams.orgCode.at(-1) :""
            const filName = '保养达成率'
            this.axios({
                method: 'post',
                url: '/dms/dcmMaintainDetail/export',
                responseType: 'blob',
                data
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        onSelectChange(selection) {
            let myArray = [];
            selection.map((item) => {
                myArray.push(item.id);
            });
            this.delIds = myArray;
        },
    }
}
</script>
<style lang="scss">
.maintainRate {
    background: #fff;

    .title {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        padding: 10px;
        border-bottom: 1px solid #dddddd;

        .icon {
            display: flex;

            .creatBtnright {
                display: flex;
                align-items: center;
                font-size: 16px;

                i {
                    font-size: 36px;
                }
            }
        }
    }
}
</style>
